<!doctype html>
<!--
@license
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>

  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>

  <title>Custom Notify Smoke Test</title>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="import" href="../../polymer.html">

  <style>
    body {
      font-family: sans-serif;
      font-size: 15px;
    }
  </style>

</head>
<body>

  <dom-module id="x-app">
    <style>
    </style>
    <template>

      <h1> Works correctly </h1>

      <h3>&lt;input value="{{inputValue::input}}"&gt;</h3>
      <input value="{{inputValue::input}}">
      <input value="{{inputValue::input}}">

      <hr>

      <h3>&lt;input value="{{inputValueCommitted::change}}&gt;</h3>
      <input value="{{inputValueCommitted::change}}">
      <input value="{{inputValueCommitted::change}}">

      <hr>

      <h3>&lt;value="{{textareaValue::input}}"&gt;</h3>
      <textarea value="{{textareaValue::input}}"></textarea>
      <textarea value="{{textareaValue::input}}"></textarea>

      <hr>

      <h3>&lt;textarea value="{{textareaValueCommitted::change}}"&gt;</h3>
      <textarea value="{{textareaValueCommitted::change}}"></textarea>
      <textarea value="{{textareaValueCommitted::change}}"></textarea>

      <hr>

      <h3>&lt;input type="checkbox"&gt;.checked</h3>
      <input type="checkbox" checked="{{checked::change}}">
      <input type="checkbox" checked="{{checked::change}}">

      <hr>

      <h3>&lt;input type="date" value="{{date::change}}"&gt;</h3>
      <input type="date" value="{{date::change}}">
      <input type="date" value="{{date::change}}">

      <hr>

      <h3>&lt;select selected-index="{{selectedIndex::change}}"&gt;</h3>
      <select selected-index="{{selectedIndex::change}}">
        <option>a</option>
        <option>b</option>
        <option>c</option>
      </select>
      <select selected-index="{{selectedIndex::change}}">
        <option>a</option>
        <option>b</option>
        <option>c</option>
      </select>

      <hr>

      <div>Current time: <span>{{currentTime}}</span></div>
      <video current-time="{{currentTime::timeupdate}}" src="http://media.w3.org/2010/05/sintel/trailer.mp4" height="200" controls></video>
      
      <hr>

      <h1> Does not work as expected </h1>

      <h3>&lt;select value="{{selectedValue::change}}"&gt;</h3>
      <p><em>Setting `value` on IE inexplicably clears the value</em></p>
      <select value="{{selectedValue::change}}">
        <option>a</option>
        <option>b</option>
        <option>c</option>
      </select>
      <select value="{{selectedValue::change}}">
        <option>a</option>
        <option>b</option>
        <option>c</option>
      </select>

      <hr>

      <h3>&lt;input type="radio" name="one" checked="{{aChecked::change}}"&gt;</h3>
      <p><em>Radio buttons do not fire changed events when unchecking</em></p>

      <label><input type="radio" name="one" checked="{{aChecked::change}}">a</label>
      <label><input type="radio" name="one" checked="{{bChecked::change}}">b</label>
      <label><input type="radio" name="one" checked="{{cChecked::change}}">c</label>
      <br><br>
      <label><input type="radio" name="two" checked="{{aChecked::change}}">a</label>
      <label><input type="radio" name="two" checked="{{bChecked::change}}">b</label>
      <label><input type="radio" name="two" checked="{{cChecked::change}}">c</label>

      <hr>

      <h3>&lt;input type="range" value="{{rangeValue::input}}"&gt;</h3>
      <p><em>IE does not fire <strong>input</strong> event for range input</em></p>

      <input type="range" value="{{rangeValue::input}}">
      <input type="range" value="{{rangeValue::input}}">
      <hr>

      <h3>&lt;input type="range" value="{{rangeValueCommitted::change}}"&gt;</h3>
      <p><em>IE fires <strong>change</strong> event immediately when dragging; all others fire change when stopping drag</em></p>
      <input type="range" value="{{rangeValueCommitted::change}}">
      <input type="range" value="{{rangeValueCommitted::change}}">


    </template>

  </dom-module>

  <script>

  document.addEventListener('WebComponentsReady', function() {
    Polymer({
      is: 'x-app'
    });
  });

  </script>

  <x-app></x-app>

</body>
</html>
